import { getTime } from "./util";

window.onload = function () {
    const $el = document.querySelector("#app");
    $el.appendChild(render());
};

const render = function () {
    const container = document.createElement("div");
    const time = Date.now();
    container.innerHTML = `<h4>my server ${time}<h4>`;

    const btn = document.createElement("button");
    btn.id = "changeBtn"
    btn.innerText = "改变内容222313";
    btn.addEventListener("click", function () {
        console.log("您点击了2221");
        window.postMessage("webpackHotUpdate" + location.hash, "*");
        console.log(getTime());
    });
    container.appendChild(btn);
    // ----------
    var proxy = new Proxy(
        {},
        {
            get: function (target, propKey) {
                if (!(propKey in target)) {
                    console.log("Accessing undefined key!");
                }

                return target[propKey];
            },
        }
    );

    proxy.a = 5;
    console.log(proxy.a);
    console.log(proxy.b);

    return container;
};

module.hot.accept("./index.js", function () {
    console.warn("【index.js / index】 Accepting the updated index.js module!");
    return;
});
module.hot.accept("./util.js", function () {
    document.querySelector('#changeBtn').innerText = Date.now()
    console.warn("【index.js / tool】Accepting the updated util.js module!");
    return;
});


window.webpackHotUpdate = function (chunkId, moreModules) {
    for (let moduleId in moreModules) {
        // 从模块中取到老的模块定义
        let oldModule = __webpack_require__.c[moduleId];
        let { parents, children } = oldModule;
        //parents哪些模块引用和这个模块  children这个模块用了哪些模块
        //更新缓存为最新代码
        console.log("parents: %s", parents);
        let module = __webpack_require__.c[moduleId] = {
            i: moduleId,
            l: false,
            exports: {},
            parents,
            children,
            hot: window.hotCreateModule(moduleId)
        }
        // 初始化执行热更新函数 
        moreModules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
        module.l = true;
        // 执行父级节点中的hot.accept相关代码
        parents.forEach(par => {
            let parModule = __webpack_require__.c[par];
            // 执行父节点中 hot.accept 注册的方法
            parModule && parModule.hot && parModule.hot._acceptedDependencies[moduleId] && parModule.hot._acceptedDependencies[moduleId]();
        })
    }
};

window.hotCreateModule = function () {
    let hot = {
        _acceptedDependencies: {},
        accept: function (dep, callback) {
            if (dep === undefined) hot._selfAccepted = true;
            else if (typeof dep === "function") hot._acceptedDependencies = dep;
            else if (typeof dep === "object")
                for (var i = 0; i < dep.length; i++)
                    hot._acceptedDependencies[dep[i]] = callback || function () { };
            else hot._acceptedDependencies[dep] = callback || function () { };
        }
    }
    return hot;
}
